<template>
  <div class="app">
    <PageTools :show-before="showBefore">
      <template #before>
        <span>123</span>
      </template>
      <template #after>
        <el-button size="small" type="primary" @click="showDialog = true"
          >导入</el-button
        >
        <el-button size="small" type="warning" @click="deriveData"
          >导出</el-button
        >
      </template>
    </PageTools>
    <el-table :data="list">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column label="工号" prop="worknumber"></el-table-column>
      <el-table-column label="电话" prop="mobile"></el-table-column>
      <el-table-column label="工作时间" prop="workname"></el-table-column>
    </el-table>

    <el-dialog title="展示" :visible="showDialog" width="30%">
      <upload-excel :on-success="success"></upload-excel>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PageTools from "@/components/PageTools";
export default {
  components: {
    PageTools,
  },
  data() {
    return {
      showDialog: false,
      showBefore: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      list: [
        {
          username: "夏洁",
          worknumber: 2,
          mobile: 13315472655,
          workname: "2020年10月4日",
        },
        {
          username: "夏洁",
          worknumber: 2,
          mobile: 13315472655,
          workname: "2020年10月4日",
        },
        {
          username: "夏洁",
          worknumber: 2,
          mobile: 13315472655,
          workname: "2020年10月4日",
        },
        {
          username: "夏洁",
          worknumber: 2,
          mobile: 13315472655,
          workname: "2020年10月4日",
        },
        {
          username: "夏洁",
          worknumber: 2,
          mobile: 13315472655,
          workname: "2020年10月4日",
        },
      ],
    };
  },
  methods: {
    success({ header, results }) {
      const userRelations = {
        姓名: "username",
        工号: "worknumber",
        电话: "mobile",
        工作时间: "workname",
      };
      var newArr = results.map((item) => {
        var obj = {};
        Object.keys(item).forEach((key) => {
          if(userRelations[key]==='workname'){
            obj[userRelations[key]]=new Date(this.formatDate(item[key]),'/')
         return 
         }
          obj[userRelations[key]] = item[key];
        });
        return obj;
      });
      
      this.list.push(...newArr);
      this.$message.success("导入成功");
      this.showDialog = false;
    },
    deriveData() {
      const headers = {
        姓名: "username",
        工号: "worknumber",
        电话: "mobile",
        工作时间: "workname",
      };
      import("@/vendor/Export2Excel").then((excel) => {
        const data = this.formaJson(headers, this.list);
        excel.export_json_to_excel({
          header: Object.keys(headers),
          data,
          filename: "信息文件",
        });
      });
    },
    formaJson(headers, list) {
      return list.map((item) => {
        return Object.keys(headers).map((key) => item[headers[key]]);
      });
    },
    formatDate(numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1);
      time.setYear(time.getFullYear() - 70);
      const year = time.getFullYear() + "";
      const month = time.getMonth() + 1 + "";
      const date = time.getDate() - 1 + "";
      if (format && format.length === 1) {
        return year + format + month + format + date;
      }
      return (
        year +
        (month < 10 ? "0" + month : month) +
        (date < 10 ? "0" + date : date)
      );
    },
  },
};
</script>

<style>
</style>